<template>
    <div>
        <TableCompoent1 :tableHeader="tableHeader" :TableBody="TableBody" />

        <div style="  position: absolute;top: -8%;
            left: 301px;  
            ">
            <!-- <el-select v-model="hasClockin" filterable @change="clockDate" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select> -->
            <el-input placeholder="请输入故障信息" v-model="hasClockin" @change.native="clockTable"></el-input>
        </div>
        <pageChild :total="total" :pageSize="pageSize" :current="current" @currentChange="currentChange" />

    </div>
</template>

<script>

import { MesRecordExceptFaultAlarmRecord } from '@/api/MesRecordExceptfaultAlarmRecordApi/index'
export default {
    components: {
        TableCompoent1: () => import("@/components/ComprotsTable/index1.vue"),
        pageChild: () => import("@/components/pagination/index.vue"),

    },
    data() {
        return {

            total: 0,
            pageSize: 10,
            current: 1,
            hasClockin: "",
            TableBody: [],
            tableHeader: [
                {
                    "title": "故障信息",
                }, {
                    "title": "故障开始时间",
                }, {
                    "title": "故障解决时间",
                }, {
                    "title": "故障是否解决",
                }, {
                    "title": "故障解决人",
                },
            ]
        }
    },
    mounted() {
        this.clockTable(this.hasClockin)
    },
    methods: {
        clockDate() {
            this.clockTable(this.hasClockin)

        },
        currentChange(current) {
            this.current = current
            this.clockTable(this.hasClockin)

        },
        clockTable(item) {
            MesRecordExceptFaultAlarmRecord({
                current: this.current,
                size: this.pageSize,
                exceptMessageCn: this.hasClockin
            }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.TableBody = res.data.list;
                    this.total = Number(res.data.total);
                    this.pageSize = res.data.pageSize;
                    this.current = res.data.pageNum;

                    console.log(this.TableBody);
                }
            }).catch(e => {
                console.log(e)
            })
        },
        // MesRecordExceptFaultAlarmRecord(){
        //     MesRecordExceptFaultAlarmRecord().then(resp=>{
        //         if(resp.code===200){
        //             this.TableBody = resp.data.list;
        //             this.total = Number(resp.data.total);
        //             this.pageSize = resp.data.pageSize;

        //             console.log(this.TableBody);
        //         }
        //     }).catch(e=>{
        //         console.log(e)
        //     })
        // }
    }

}
</script>

<style scoped lang="less" >
.el-pagination {
    float: right;
    cursor: pointer;
}

.el-button--primary {
    width: 84px;
    height: 34px;
    background: #031231;
    opacity: 1;
    border: 0px solid #5B9FC3;
    color: white;
    font-size: 10px;
}

.el-pagination /deep/ .btn-prev {
    height: 100% !important;

}

.el-pagination /deep/ .btn-next {
    height: 100% !important;

}

.el-pagination /deep/ .el-pager {
    height: 100% !important;

    li {
        height: 100% !important;
    }
}

s .el-pagination /deep/ .el-pager {
    height: 34px !important;

    li {
        height: 100% !important;
    }
}

.el-pagination /deep/ .btn-prev,
.el-pagination /deep/ .el-pager .number,
.el-pagination /deep/ .btn-next,
.el-pagination /deep/ .el-icon,
.el-pagination /deep/ .is-background .el-pager li {
    width: 30px;
    height: 30px;
    line-height: 30px;
    opacity: 1;
    border: 1px solid #5B9FC3;
    background-color: #031231 !important;
}
</style>